<template>
  <div>
    <button v-on:click="counter += 1">增加</button>
    <p>{{counter}}</p>
    <button v-on:click="greet">greet</button>
    <button v-on:click="say('what')">what</button>
  </div>
  <!--  --><!-- 阻止单击事件冒泡 -->
<!-- <a v-on:click.stop="doThis"></a> -->
<!-- 提交事件不再重载页面 -->
<!-- <form v-on:submit.prevent="onSubmit"></form> -->
<!-- 修饰符可以串联  -->
<!-- <a v-on:click.stop.prevent="doThat"></a> -->
<!-- 只有修饰符 -->
<!-- <form v-on:submit.prevent></form> -->
<!-- 添加事件侦听器时使用事件捕获模式 -->
<!-- <div v-on:click.capture="doThis">...</div> -->
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<!-- <div v-on:click.self="doThat">...</div> -->

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<!-- <a v-on:click.once="doThis"></a> -->

</template>

<script>
export default {
  name: 'vOn',
  data () {
    return {
      counter: 1,
      name: 'hlx'
    }
  },
  methods: {
    greet: function (event) {
      alert(this.name)
      if (event) {
        alert(event.target.tagName)
      }
    },
    say: function (message) {
      alert(message)
    }
  }
}
</script>

<style scoped>

</style>
